<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on事件绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- v-on事件绑定 可以绑定属性直接赋值 -->
			<h2>{{num}}</h2>
			<button type="button" v-on:click="num++">+</button>
			<button type="button" v-on:click="num--">-</button>
			<hr />
			
			<!-- v-on事件绑定 调用vue中的函数 -->
			<h2>{{num2}}</h2>
			<button type="button" v-on:click="increment">+</button>
			<button type="button" v-on:click="decrement">-</button>
			<hr />
			
			<!-- v-on事件绑定的简化操作 -->
			<h2>{{num3}}</h2>
			<button type="button" @click="increment2">+</button>
			<button type="button" @click="decrement2">-</button>
			<hr />
			
			<!-- v-on事件绑定参数传递 -->
			<h2>{{num4}}</h2>
			<button type="button" @click="increment(123)">+</button>
			<hr />
		</div>
		
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: { 
					num : "0",
					num2 : 0,
					num3 : 0,
					num4 : 0
				},
				methods:{
					increment(){
						this.num2 ++;
					},
					decrement(){
						this.num2 --;
					},
					increment2(){
						this.num3 ++;
					},
					decrement2(){
						this.num3 --;
					},
					increment(num4){
						console.log(num4);
					}
				}
			});
		</script>
	</body>
</html>
